<template>
  <button @click="hello += '!'">点我打招呼</button>
  <h1>内心独白:{{job.data.msg}}</h1>
  <button @click = "job.name = '后端'">点击修改我的工作</button>
  <button @click="job.salary = '10k'">点我跳槽加薪</button>
  <button @click="job.data.msg = '给我一万 我要猛干'">点击改变内心独白</button>
</template>

<script>
//引入watch函数
import {ref, watch} from "vue";

export default {
  name: "my-demo",
  setup() {
    let job = ref({
      data:{
        msg:'妈的，前后端老子都干 就给5k 干个蛋啊'
      }
    })

    //watch监视关于.value问题 如果是基础数据类型的数据就不用.value 如果是对象类型的数据需要.value
    watch(job.value ,(newValue,oldValue) => {
      console.log('你跳槽了',newValue,oldValue)
    },{deep:true})

    return {
      job
    }
  }
}
</script>

<style scoped>

</style>